﻿@page "/components/button"
@page "/components/compoundbutton"
@page "/components/compound-button"
@page "/components/iconbutton"
@page "/components/icon-button"

<PageOutlet Url="components/button"
            Title="Button"
            Description="Button component of the bit BlazorUI components" />

<DemoPage Name="Button"
          Description="Buttons enable users to take actions with a single tap. They're commonly used in forms, dialog panels, and specialized for tasks like navigation or repeated actions."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Buttons/Button/BitButton.razor"
          GitHubDemoUrl="Buttons/Button/BitButtonDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitButton>Button</BitButton>
    </DemoExample>

    <DemoExample Title="Primary & Secondary" RazorCode="@example2RazorCode" Id="example2">
        <div class="example-content">
            <BitButton>Primary text</BitButton>
            <BitButton SecondaryText="secondary text" />
        </div>
        <br />
        <div class="example-content">
            <BitButton SecondaryText="this is the secondary text">Primary text</BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Variant" RazorCode="@example3RazorCode" Id="example3">
        <div>The Button offers three style variants: Fill (default), Outline, and Text.</div>
        <br />
        <div class="example-content">
            <BitButton Variant="BitVariant.Fill">Fill</BitButton>
            <BitButton Variant="BitVariant.Outline">Outline</BitButton>
            <BitButton Variant="BitVariant.Text">Text</BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton Variant="BitVariant.Fill" SecondaryText="this is the secondary text">Fill</BitButton>
            <BitButton Variant="BitVariant.Outline" SecondaryText="this is the secondary text">Outline</BitButton>
            <BitButton Variant="BitVariant.Text" SecondaryText="this is the secondary text">Text</BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton Variant="BitVariant.Fill" IsEnabled="false">Fill</BitButton>
            <BitButton Variant="BitVariant.Outline" IsEnabled="false">Outline</BitButton>
            <BitButton Variant="BitVariant.Text" IsEnabled="false">Text</BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton Variant="BitVariant.Fill" SecondaryText="this is the secondary text" IsEnabled="false">Fill</BitButton>
            <BitButton Variant="BitVariant.Outline" SecondaryText="this is the secondary text" IsEnabled="false">Outline</BitButton>
            <BitButton Variant="BitVariant.Text" SecondaryText="this is the secondary text" IsEnabled="false">Text</BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Icon" RazorCode="@example4RazorCode" Id="example4">
        <div>BitButton has an icon slot that, if specified, renders an icon that can be set at the start (default) or revered positioned at the end of component.</div>
        <br />
        <div class="example-content">
            <BitButton IconName="@BitIconName.EmojiNeutral" Variant="BitVariant.Fill" />
            <BitButton IconName="@BitIconName.EmojiNeutral" Variant="BitVariant.Outline" />
            <BitButton IconName="@BitIconName.EmojiNeutral" Variant="BitVariant.Text" />
        </div>
        <br /><br />
        <div class="example-content">
            <BitButton IconName="@BitIconName.Emoji" Variant="BitVariant.Fill">Start</BitButton>
            <BitButton IconName="@BitIconName.Emoji" Variant="BitVariant.Outline">Start</BitButton>
            <BitButton IconName="@BitIconName.Emoji" Variant="BitVariant.Text">Start</BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton IconName="@BitIconName.Emoji" SecondaryText="this is the secondary text" Variant="BitVariant.Fill">Start</BitButton>
            <BitButton IconName="@BitIconName.Emoji" SecondaryText="this is the secondary text" Variant="BitVariant.Outline">Start</BitButton>
            <BitButton IconName="@BitIconName.Emoji" SecondaryText="this is the secondary text" Variant="BitVariant.Text">Start</BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" ReversedIcon>End</BitButton>
            <BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" ReversedIcon>End</BitButton>
            <BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" ReversedIcon>End</BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Fill" ReversedIcon>End</BitButton>
            <BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Outline" ReversedIcon>End</BitButton>
            <BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Text" ReversedIcon>End</BitButton>
        </div>
        <br /><br />
        <div class="example-content">
            <BitButton IconUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Fill">Start</BitButton>
            <BitButton IconUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Outline">Start</BitButton>
            <BitButton IconUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Text">Start</BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton IconUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Fill" ReversedIcon>End</BitButton>
            <BitButton IconUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Outline" ReversedIcon>End</BitButton>
            <BitButton IconUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Text" ReversedIcon>End</BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Loading" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Demonstrate the dynamic loading state of buttons using the "IsLoading" property. Customize the loading label to provide users with feedback on ongoing processes.</div>
        <br /><br />
        <div class="example-content">
            <BitButton IsLoading="fillIsLoading" Variant="BitVariant.Fill" Style="min-width: 11rem" OnClick="LoadingFillClick">
                Click me
            </BitButton>

            <BitButton IsLoading="outlineIsLoading" Variant="BitVariant.Outline" Style="min-width: 11rem" OnClick="LoadingOutlineClick">
                Click me
            </BitButton>

            <BitButton IsLoading="textIsLoading" Variant="BitVariant.Text" Style="min-width: 11rem" OnClick="LoadingTextClick">
                Click me
            </BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton IsLoading="fillIsLoading" SecondaryText="this is the secondary text" Variant="BitVariant.Fill" Style="min-width: 11rem" OnClick="LoadingFillClick">
                Click me
            </BitButton>

            <BitButton IsLoading="outlineIsLoading" SecondaryText="this is the secondary text" Variant="BitVariant.Outline" Style="min-width: 11rem" OnClick="LoadingOutlineClick">
                Click me
            </BitButton>

            <BitButton IsLoading="textIsLoading" SecondaryText="this is the secondary text" Variant="BitVariant.Text" Style="min-width: 11rem" OnClick="LoadingTextClick">
                Click me
            </BitButton>
        </div>
        <br /><br /><br />
        <div><b>AutoLoading</b>:</div><br />
        <div class="example-content">
            <BitButton OnClick="AutoLoadingClick" AutoLoading>Click me</BitButton>
            <div>AutoLoading click count: @autoLoadCount</div>
        </div>
        <br />
        <div class="example-content">
            <BitButton OnClick="AutoLoadingReclick" AutoLoading Reclickable>Reclickable</BitButton>
            <div>Re-clickable AutoLoading click count: @reclickableAutoLoadCount</div>
        </div>
    </DemoExample>

    <DemoExample Title="Loading Label" RazorCode="@example6RazorCode" Id="example6">
        <div>Explore customizing the loading label and its different positions, including start, end, bottom, and top.</div>
        <br />
        <div class="example-content">
            <BitButton IsLoading="true"
                       LoadingLabel="End..."
                       Style="min-width: 6.5rem;"
                       Variant="BitVariant.Outline"
                       LoadingLabelPosition="BitLabelPosition.End">
                End
            </BitButton>

            <BitButton IsLoading="true"
                       LoadingLabel="Start..."
                       Style="min-width: 6.5rem;"
                       Variant="BitVariant.Outline"
                       LoadingLabelPosition="BitLabelPosition.Start">
                Start
            </BitButton>
        </div>
        <br />
        <div class="example-content">
            <BitButton IsLoading="true"
                       LoadingLabel="Bottom..."
                       Style="min-width: 6.5rem;"
                       Variant="BitVariant.Outline"
                       LoadingLabelPosition="BitLabelPosition.Bottom">
                Bottom
            </BitButton>

            <BitButton IsLoading="true"
                       LoadingLabel="Top..."
                       Style="min-width: 6.5rem;"
                       Variant="BitVariant.Outline"
                       LoadingLabelPosition="BitLabelPosition.Top">
                Top
            </BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Href" RazorCode="@example7RazorCode" Id="example7">
        <div>Use BitButton as a hyperlink to external URLs, opening either in a new tab or the same tab.</div>
        <br />
        <div class="example-content">
            <BitButton Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
                Open bitplatform.dev
            </BitButton>

            <BitButton Href="https://github.com/bitfoundation/bitplatform" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
                Go to bitplatform GitHub
            </BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Rel" RazorCode="@example8RazorCode" Id="example8">
        <div>Use BitButton as a hyperlink to external URLs, with a rel attribute.</div>
        <br />
        <div class="example-content">
            <BitButton Rel="BitLinkRel.NoFollow" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
                Open bitplatform.dev with a rel attribute (nofollow)
            </BitButton>

            <BitButton Rel="BitLinkRel.NoFollow | BitLinkRel.NoReferrer" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
                Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
            </BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Float & Draggable" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div>Demonstrates a floating button with adjustable float modes and customizable positions.</div>
        <br />
        <div class="example-content">
            <BitDropdown Label="FloatPosition" Items="floatPositionList" @bind-Value="floatPosition" FitWidth />
            <BitTextField Label="FloatOffset" @bind-Value="floatOffset" Immediate />
        </div>
        <br />
        <BitButton IconOnly 
                   Size="BitSize.Large" 
                   IconName="@BitIconName.Add" 
                   OnClick="ScrollToFloat" 
                   Float Draggable
                   FloatPosition="floatPosition" 
                   FloatOffset="@floatOffset" />
        <br /><br />
        <div><b>FloatAbsolute & Draggable</b>:</div><br />
        <div style="position: relative; border:1px gray solid">
            <BitButton IconOnly 
                       IconName="@BitIconName.Edit" 
                       Draggable
                       FloatAbsolute
                       FloatPosition="floatPosition" 
                       FloatOffset="@floatOffset" />
            <div style="height:300px;overflow:auto;padding:0.5rem">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits 
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite 
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the 
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be 
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and 
                each word has the power to transform into something extraordinary. Here lies the start of something new—an 
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an 
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey 
                begins here, in this quiet moment where everything is possible.
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Button Type" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
        <div>BitButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes.</div>
        <br />
        <div class="form-container">
            @if (formIsValidSubmit is false)
            {
                <EditForm Model="buttonValidationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit" novalidate>
                    <DataAnnotationsValidator />

                    <BitTextField Label="Required" Required @bind-Value="buttonValidationModel.RequiredText" />
                    <ValidationMessage For="() => buttonValidationModel.RequiredText" style="color:red" />
                    <br />
                    <BitTextField Label="Non Required" @bind-Value="buttonValidationModel.NonRequiredText" />
                    <br />
                    <div>
                        <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
                        <BitButton ButtonType="BitButtonType.Reset">Reset</BitButton>
                        <BitButton ButtonType="BitButtonType.Button">Button</BitButton>
                    </div>
                </EditForm>
            }
            else
            {
                <BitMessage Color="BitColor.Success">
                    The form submitted successfully.
                </BitMessage>
            }
        </div>
    </DemoExample>

    <DemoExample Title="Templates" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
        <div>Here are some examples of customizing the button content.</div>
        <br />
        <div>
            <BitButton Class="custom-content">
                <BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />
                <span>A primary template</span>
                <BitRippleLoading CustomSize="20" Color="BitColor.Tertiary" />
            </BitButton>
            <br />
            <BitButton Class="custom-content" Variant="BitVariant.Outline">
                <PrimaryTemplate>Primary text</PrimaryTemplate>
                <SecondaryTemplate>
                    <BitIcon IconName="@BitIconName.Accept" />
                    <span>A secondary template</span>
                    <BitRollerLoading CustomSize="20" />
                </SecondaryTemplate>
            </BitButton>
            <br />
            <BitButton Class="custom-content" Variant="BitVariant.Text">
                <PrimaryTemplate>
                    <BitIcon IconName="@BitIconName.Airplane" />
                    <span>A primary template</span>
                    <BitRippleLoading CustomSize="20" />
                </PrimaryTemplate>
                <SecondaryTemplate>
                    <BitIcon IconName="@BitIconName.Accept" />
                    <span>A secondary template</span>
                    <BitRollerLoading CustomSize="20" />
                </SecondaryTemplate>
            </BitButton>
        </div>
        <br /><br />
        <div>Utilize the "LoadingTemplate" feature to design personalized loading indicators and messages, providing a unique visual experience during loading states.</div>
        <br />
        <div class="example-content">
            <BitButton IsLoading="!templateIsLoading" OnClick="LoadingTemplateClick">
                <PrimaryTemplate>Click me</PrimaryTemplate>
                <LoadingTemplate>
                    <div style="display:flex;align-items:center;">
                        <BitEllipsisLoading CustomSize="32" Color="BitColor.Tertiary" />
                        <span>Wait...</span>
                    </div>
                </LoadingTemplate>
            </BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
        <div>
            Managing button click event (OnClick).
        </div>
        <br />
        <div class="example-content">
            <BitButton OnClick="() => clickCounter++">Click me (@clickCounter)</BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example13RazorCode" Id="example13">
        <div>Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
        <br />
        <div><b>Small</b>:</div><br />
        <BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />
        <BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />

        <BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
        <BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />

        <BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
        <BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
        <br/><br/>
        <BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
        <BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>

        <BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
        <BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>

        <BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
        <BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
        <br /><br/>
        <BitButton Size="BitSize.Small" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
        <BitButton Size="BitSize.Small" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
        <BitButton Size="BitSize.Small" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>

        <br /><br /><br />

        <div><b>Medium</b>:</div><br />
        <BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />
        <BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />

        <BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
        <BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />

        <BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
        <BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
        <br /><br/>
        <BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
        <BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>

        <BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
        <BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>

        <BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
        <BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
        <br /><br/>
        <BitButton Size="BitSize.Medium" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
        <BitButton Size="BitSize.Medium" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
        <BitButton Size="BitSize.Medium" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>

        <br /><br /><br />

        <div><b>Large</b>:</div><br />
        <BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />
        <BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />

        <BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
        <BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
            
        <BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
        <BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
        <br /><br/>
        <BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
        <BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>

        <BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
        <BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
            
        <BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
        <BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
        <br /><br/>
        <BitButton Size="BitSize.Large" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
        <BitButton Size="BitSize.Large" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
        <BitButton Size="BitSize.Large" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
    </DemoExample>

    <DemoExample Title="FullWidth" RazorCode="@example14RazorCode" Id="example14">
        <div>Setting the FullWidth makes the button occupy 100% of its container's width.</div>
        <br />
        <BitButton FullWidth IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Full Width Button</BitButton>
    </DemoExample>

    <DemoExample Title="FixedColor" RazorCode="@example15RazorCode" Id="example15">
        <div>FixedColor flag parameter makes the foreground color to be fixed regardless of its hovering state.</div>
        <br />
        <BitButton FixedColor IconOnly
                   Size="BitSize.Large"
                   Variant="BitVariant.Outline"
                   IconName="@BitIconName.Emoji2"
                   Color="BitColor.TertiaryBackground" />

        <BitButton FixedColor IconOnly
                   Size="BitSize.Large"
                   Variant="BitVariant.Text"
                   IconName="@BitIconName.Emoji2"
                   Color="BitColor.TertiaryBackground" />
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example16RazorCode" Id="example16">
        <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
        <br />
        <div>
            <BitButton Color="BitColor.Primary">Primary</BitButton>
            <BitButton Color="BitColor.Primary" Variant="BitVariant.Outline">Primary</BitButton>
            <BitButton Color="BitColor.Primary" Variant="BitVariant.Text">Primary</BitButton>
        </div>
        <br />
        <div>
            <BitButton Color="BitColor.Secondary">Secondary</BitButton>
            <BitButton Color="BitColor.Secondary" Variant="BitVariant.Outline">Secondary</BitButton>
            <BitButton Color="BitColor.Secondary" Variant="BitVariant.Text">Secondary</BitButton>
        </div>
        <br />
        <div>
            <BitButton Color="BitColor.Tertiary">Tertiary</BitButton>
            <BitButton Color="BitColor.Tertiary" Variant="BitVariant.Outline">Tertiary</BitButton>
            <BitButton Color="BitColor.Tertiary" Variant="BitVariant.Text">Tertiary</BitButton>
        </div>
        <br />
        <div>
            <BitButton Color="BitColor.Info">Info</BitButton>
            <BitButton Color="BitColor.Info" Variant="BitVariant.Outline">Info</BitButton>
            <BitButton Color="BitColor.Info" Variant="BitVariant.Text">Info</BitButton>
        </div>
        <br />
        <div>
            <BitButton Color="BitColor.Success">Success</BitButton>
            <BitButton Color="BitColor.Success" Variant="BitVariant.Outline">Success</BitButton>
            <BitButton Color="BitColor.Success" Variant="BitVariant.Text">Success</BitButton>
        </div>
        <br />
        <div>
            <BitButton Color="BitColor.Warning">Warning</BitButton>
            <BitButton Color="BitColor.Warning" Variant="BitVariant.Outline">Warning</BitButton>
            <BitButton Color="BitColor.Warning" Variant="BitVariant.Text">Warning</BitButton>
        </div>
        <br />
        <div>
            <BitButton Color="BitColor.SevereWarning">SevereWarning</BitButton>
            <BitButton Color="BitColor.SevereWarning" Variant="BitVariant.Outline">SevereWarning</BitButton>
            <BitButton Color="BitColor.SevereWarning" Variant="BitVariant.Text">SevereWarning</BitButton>
        </div>
        <br />
        <div>
            <BitButton Color="BitColor.Error">Error</BitButton>
            <BitButton Color="BitColor.Error" Variant="BitVariant.Outline">Error</BitButton>
            <BitButton Color="BitColor.Error" Variant="BitVariant.Text">Error</BitButton>
        </div>
        <br /><br />
        <div style="background:var(--bit-clr-fg-sec);padding:1rem">
            <div>
                <BitButton Color="BitColor.PrimaryBackground">PrimaryBackground</BitButton>
                <BitButton Color="BitColor.PrimaryBackground" Variant="BitVariant.Outline">PrimaryBackground</BitButton>
                <BitButton Color="BitColor.PrimaryBackground" Variant="BitVariant.Text">PrimaryBackground</BitButton>
            </div>
            <br />
            <div>
                <BitButton Color="BitColor.SecondaryBackground">SecondaryBackground</BitButton>
                <BitButton Color="BitColor.SecondaryBackground" Variant="BitVariant.Outline">SecondaryBackground</BitButton>
                <BitButton Color="BitColor.SecondaryBackground" Variant="BitVariant.Text">SecondaryBackground</BitButton>
            </div>
            <br />
            <div>
                <BitButton Color="BitColor.TertiaryBackground">TertiaryBackground</BitButton>
                <BitButton Color="BitColor.TertiaryBackground" Variant="BitVariant.Outline">TertiaryBackground</BitButton>
                <BitButton Color="BitColor.TertiaryBackground" Variant="BitVariant.Text">TertiaryBackground</BitButton>
            </div>
        </div>
        <br />
        <div style="padding:1rem">
            <div>
                <BitButton Color="BitColor.PrimaryForeground">PrimaryForeground</BitButton>
                <BitButton Color="BitColor.PrimaryForeground" Variant="BitVariant.Outline">PrimaryForeground</BitButton>
                <BitButton Color="BitColor.PrimaryForeground" Variant="BitVariant.Text">PrimaryForeground</BitButton>
            </div>
            <br />
            <div>
                <BitButton Color="BitColor.SecondaryForeground">SecondaryForeground</BitButton>
                <BitButton Color="BitColor.SecondaryForeground" Variant="BitVariant.Outline">SecondaryForeground</BitButton>
                <BitButton Color="BitColor.SecondaryForeground" Variant="BitVariant.Text">SecondaryForeground</BitButton>
            </div>
            <br />
            <div>
                <BitButton Color="BitColor.TertiaryForeground">TertiaryForeground</BitButton>
                <BitButton Color="BitColor.TertiaryForeground" Variant="BitVariant.Outline">TertiaryForeground</BitButton>
                <BitButton Color="BitColor.TertiaryForeground" Variant="BitVariant.Text">TertiaryForeground</BitButton>
            </div>
        </div>
        <br />
        <div style="padding:1rem">
            <div>
                <BitButton Color="BitColor.PrimaryBorder">PrimaryBorder</BitButton>
                <BitButton Color="BitColor.PrimaryBorder" Variant="BitVariant.Outline">PrimaryBorder</BitButton>
                <BitButton Color="BitColor.PrimaryBorder" Variant="BitVariant.Text">PrimaryBorder</BitButton>
            </div>
            <br />
            <div>
                <BitButton Color="BitColor.SecondaryBorder">SecondaryBorder</BitButton>
                <BitButton Color="BitColor.SecondaryBorder" Variant="BitVariant.Outline">SecondaryBorder</BitButton>
                <BitButton Color="BitColor.SecondaryBorder" Variant="BitVariant.Text">SecondaryBorder</BitButton>
            </div>
            <br />
            <div>
                <BitButton Color="BitColor.TertiaryBorder">TertiaryBorder</BitButton>
                <BitButton Color="BitColor.TertiaryBorder" Variant="BitVariant.Outline">TertiaryBorder</BitButton>
                <BitButton Color="BitColor.TertiaryBorder" Variant="BitVariant.Text">TertiaryBorder</BitButton>
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
        <br /><br />
        <div>Component's Style & Class:</div>
        <br />
        <div class="example-content">
            <BitButton Style="background-color: transparent; border-color: blueviolet; color: blueviolet;"
                       SecondaryText="this is the secondary text"
                       Variant="BitVariant.Outline">
                Styled Button
            </BitButton>

            <BitButton Class="custom-class">
                Classed Button
            </BitButton>
        </div>
        <br /><br /><br />
        <div><b>Styles</b> & <b>Classes</b>:</div>
        <br />
        <div class="example-content">
            <BitButton IsLoading="stylesIsLoading"
                       LoadingLabel="Wait..."
                       OnClick="LoadingStylesClick"
                       Styles="@(new() { Root = "background-color: peachpuff; border-color: peachpuff; min-width: 6rem;",
                                             LoadingLabel = "color: tomato; font-weight: bold;",
                                             Spinner = "border-color: tomato; border-top-color: goldenrod;" })">
                Click me
            </BitButton>

            <BitButton IsLoading="classesIsLoading"
                       LoadingLabel="Sending..."
                       OnClick="LoadingClassesClick"
                       Variant="BitVariant.Outline"
                       Classes="@(new() { Root = "custom-root",
                                              LoadingContainer = "custom-container",
                                              Spinner = "custom-spinner" })">
                Click me
            </BitButton>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example18RazorCode" Id="example18">
        <div>Use BitButton in right-to-left (RTL).</div>
        <br />
        <div class="example-content" dir="rtl">
            <BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Fill">
                دکمه با آیکن
            </BitButton>
            <BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Outline">
                دکمه با آیکن
            </BitButton>
            <BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Text">
                دکمه با آیکن
            </BitButton>
        </div>
        <br />
        <div class="example-content" dir="rtl">
            <BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Fill" SecondaryText="این متن ثانویه است">
                دکمه با آیکن
            </BitButton>
            <BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Outline" SecondaryText="این متن ثانویه است">
                دکمه با آیکن
            </BitButton>
            <BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Text" SecondaryText="این متن ثانویه است">
                دکمه با آیکن
            </BitButton>
        </div>
        <br /><br />
        <div class="example-content" dir="rtl">
            <BitButton IsLoading Dir="BitDir.Rtl" LoadingLabel="در حال بارگذاری" Variant="BitVariant.Fill" />
            <BitButton IsLoading Dir="BitDir.Rtl" LoadingLabel="در حال بارگذاری" Variant="BitVariant.Outline" />
            <BitButton IsLoading Dir="BitDir.Rtl" LoadingLabel="در حال بارگذاری" Variant="BitVariant.Text" />
        </div>
    </DemoExample>
</DemoPage>